<template>
  <SumbitDialog
    class="updateDialog"
    width="800px"
    :dialogVisible.sync="dialogVisible"
    sumbitColor="#165DFF"
    sumbitText="保存"
    @onSubmit="submitForm"
  >
    <div slot="title">素材设置上传</div>
    <div class="flexbox">
      <div style="width:50%">
        <div class="L-box poster_img flexbox flexcolumn flexcenter flexjust">
          <video id="media" :src="addMtInfoForm.material" muted preload class="vd_poster" controls width="100%" height="100%" v-if="addMtInfoForm.material"></video>
            <template v-else>
                    <img src="../../../assets/img/file_icon3.svg" alt="">
                    <span class="file_text">等待上传..</span>
            </template>
        </div>
      </div>
      <div style="width:50%">
        <div class="R-box">
            <el-form  :model="addMtInfoForm" :rules="rules" ref="ruleForm" label-position="top" label-width="80px">
                <el-form-item label="品牌" prop="brand_id" :rules="{ required: true, message: '请选择品牌', trigger: ['blur', 'change']}">
                    <el-select v-model="addMtInfoForm.brand_name" filterable placeholder="请选择品牌" value-key='id' style="width:100%"  disabled="true">
                        <el-option :label="item.name" :value="item" v-for="item in brandList" :key="item.id">
                            <span>
                                {{item.name}}
                            </span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品" prop="product_id" :rules="{ required: true, message: '请选择产品', trigger: ['blur', 'change']}" class="custom_label">
                    <div slot="label" class="head_tag flexbox flexbetween flexcenter" style="width: 100%;"  >
                        <div>产品</div>
                        <div @click="addProductTag(addMtInfoForm,1)" >+产品标签</div>
                    </div>
                    <el-select v-model="addMtInfoForm.product_name" filterable placeholder="请选择产品" value-key='id' style="width:100%" disabled="true">
                        <el-option :label="item.name" :value="item" v-for="item in productList" :key="item.id"></el-option>
                    </el-select>
                    <div class="flexbox flexcenter " style="flex-wrap:wrap;margin-top:12px" v-if="addMtInfoForm.product_tag_id.length > 0">
                        <div class="tag_box" v-for="(item,index) in addMtInfoForm.product_tag_id">
                            <span>{{item.name}}</span><svg @click="handleDel('product_tag_id',index)" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.1198 4.86978C10.3931 4.59641 10.3931 4.1532 10.1198 3.87983C9.84641 3.60646 9.4032 3.60646 9.12983 3.87983L6.9998 6.00986L4.86978 3.87983C4.59641 3.60646 4.1532 3.60646 3.87983 3.87983C3.60646 4.1532 3.60646 4.59641 3.87983 4.86978L6.00986 6.9998L3.87983 9.12983C3.60646 9.4032 3.60646 9.84641 3.87983 10.1198C4.1532 10.3931 4.59641 10.3931 4.86978 10.1198L6.9998 7.98975L9.12983 10.1198C9.4032 10.3931 9.84641 10.3931 10.1198 10.1198C10.3931 9.84641 10.3931 9.4032 10.1198 9.12983L7.98975 6.9998L10.1198 4.86978Z" fill="#ACB2BB"/></svg> 
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="拍摄人员" prop="photographer_uid" >
                    <el-select v-model="addMtInfoForm.photographer_uid" multiple collapse-tags filterable placeholder="请选择拍摄" style="width:100%" disabled="true" >
                        <el-option label="无" :value="9999" ></el-option>
                        <el-option :label="item.nickname" :value="item.id" v-for="item in photoSzList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <div slot="label" class="bind_box">
                        <div>绑定需求排期 ID</div>
                        <div>绑定后，此素材将在被绑定的需求列表中展示</div>
                    </div>
                    <el-input v-model="sch_name" type="Number" placeholder="请输入需求排期 ID 按回车键添加" @keyup.enter.native="handleEnter(sch_name)">
                        <div slot="suffix" style="margin-right: 7px;margin-top: 4px;">
                            <svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <path d="M12 5V7.5C12 8.60457 11.1046 9.5 10 9.5H3.5M3.5 9.5L5.5 7.5M3.5 9.5L5.5 11.5" stroke="#616C85" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                    </el-input>
                    <div class="flexbox flexcenter " style="flex-wrap:wrap;margin-top:12px" v-if="addMtInfoForm.sch_id.length > 0">
                        <div class="tag_box" v-for="(item,index) in addMtInfoForm.sch_id">
                            <span>{{item}}</span><svg @click="handleDel('sch_id',index)" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.1198 4.86978C10.3931 4.59641 10.3931 4.1532 10.1198 3.87983C9.84641 3.60646 9.4032 3.60646 9.12983 3.87983L6.9998 6.00986L4.86978 3.87983C4.59641 3.60646 4.1532 3.60646 3.87983 3.87983C3.60646 4.1532 3.60646 4.59641 3.87983 4.86978L6.00986 6.9998L3.87983 9.12983C3.60646 9.4032 3.60646 9.84641 3.87983 10.1198C4.1532 10.3931 4.59641 10.3931 4.86978 10.1198L6.9998 7.98975L9.12983 10.1198C9.4032 10.3931 9.84641 10.3931 10.1198 10.1198C10.3931 9.84641 10.3931 9.4032 10.1198 9.12983L7.98975 6.9998L10.1198 4.86978Z" fill="#ACB2BB"/></svg> 
                        </div>
                    </div>
                </el-form-item>
                 <el-form-item class="heade_from">
                    <div slot="label" class="head_tag flexbox flexbetween flexcenter">
                        <div>素材标签</div>
                        <div @click="addMaterialTag(addMtInfoForm,1)">+素材标签</div>
                    </div>
                 <LabelSettingDialog :taglist="tag_list" :ModuleName="ModuleName" ref="labelsetting" />
                    <div class="flexbox flexcenter " style="flex-wrap:wrap;margin-top:12px" v-if="addMtInfoForm.tag_id.length > 0">
                        <div class="tag_box" v-for="(item,index) in addMtInfoForm.tag_id">
                            <span>{{item.name}}</span><svg @click="handleDel('tag_id',index)" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M10.1198 4.86978C10.3931 4.59641 10.3931 4.1532 10.1198 3.87983C9.84641 3.60646 9.4032 3.60646 9.12983 3.87983L6.9998 6.00986L4.86978 3.87983C4.59641 3.60646 4.1532 3.60646 3.87983 3.87983C3.60646 4.1532 3.60646 4.59641 3.87983 4.86978L6.00986 6.9998L3.87983 9.12983C3.60646 9.4032 3.60646 9.84641 3.87983 10.1198C4.1532 10.3931 4.59641 10.3931 4.86978 10.1198L6.9998 7.98975L9.12983 10.1198C9.4032 10.3931 9.84641 10.3931 10.1198 10.1198C10.3931 9.84641 10.3931 9.4032 10.1198 9.12983L7.98975 6.9998L10.1198 4.86978Z" fill="#ACB2BB"/></svg> 
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div slot="label" class="bind_box">
                        <div>自定义素材名称</div>
                        <!-- <div>最终素材名称格式为：品牌名称+产品名称+自定义素材名称</div> -->
                    </div>
                    <!-- <el-input v-model="addMtInfoForm.defined_name"  placeholder="请输入自定义素材名称" 
                        maxlength="12"
                        show-word-limit></el-input> -->
                        <el-autocomplete v-model="addMtInfoForm.defined_name"  :fetch-suggestions="querySearch" placeholder="请输入自定义素材名称" style="width:100%"
                        maxlength="12"
                        show-word-limit>
                    </el-autocomplete>
                </el-form-item>
            </el-form>
        </div>
      </div>
    </div>
    <LabelDialog ref="labelporduct" ReqUrl="/adminapi/Materialfj/tagAdd" :taglist="Type_tag_list" TagType="3" :ProductId="addMtInfoForm.product_id" 
            @getTagList="(query)=>{getNewTagList(query,3)}"
            @submitForm="submitDataForm"/>
  </SumbitDialog>
</template>

<script>
import SumbitDialog from "@/components/components/SumbitDialog";
import LabelSettingDialog from "../../LabelSettings/index";
import LabelDialog from "@/components/components/LabelDialog";
export default {
  data() {
    return {
      ModuleName: "Storyboard",
      dialogVisible: false,
      brandList: [], //品牌列表
      productList: [], //产品列表
      photoSzList:[],//拍摄人员列表
      Type_tag_list:[],
      addMtInfoForm: {
        brand_id: "",//品牌ID
        brand_name: "",//品牌名称
        material: "",
        photographer_uid: [],
        product_tag_id:[],
        product_id: "",
        product_name: "",
        defined_name:"",
        sch_id: [],
        tag_id: [],
        process: 0,
        brandSelect:{id:'',name:''},
        productSelect:{name:''}
      },
      product_tag_id:[],
      sch_name:"",
      tag_list:[],
      restaurants:[]
    };
  },
  created() {
    this.getSzPhotoList();
    this.getBrandList();
  },
  components: {
    SumbitDialog,
    LabelSettingDialog,
    LabelDialog
  },
  methods: {
    submitDataForm(addMtInfoForm){
        this.$refs.labelporduct.closeDialog();
        this.$refs.labelporduct.loading = false;
        this.addMtInfoForm.product_tag_id = addMtInfoForm
    },
    async addProductTag(addMtInfoForm){
        await this.getNewTagList(undefined,3);
            this.$nextTick(()=>{
                this.$refs.labelporduct.openDialog();
                this.$refs.labelporduct.selectTag(this.Type_tag_list[0]) 
                this.$refs.labelporduct.tagpid = JSON.parse(JSON.stringify(addMtInfoForm.product_tag_id))
            })
    },
    async getNewTagList(query,tag_type) {
            const { data: res } = await this.$http.post(
                "adminapi/materialfj/tagList",
                {
                    page: 1,
                    limit: 0,
                    query:query?query:undefined,
                    tag_type:tag_type,
                    product_id:this.addMtInfoForm.product_id?this.addMtInfoForm.product_id:undefined
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
              this.Type_tag_list = res.data.list;
            }
        },
    querySearch(queryString, cb) {
        let restaurants = this.restaurants;
        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
    createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
    async EchoData(item){
         this.restaurants = JSON.parse(localStorage.getItem('restaurants')) || [];
        const { data: res } = await this.$http.post("adminapi/materialfj/materialDetail",{video_id:item.video_id});
            if (res.code !== 200) {
                return this.$message.error(res.msg);
            } else {
               console.log(res.data)
               this.addMtInfoForm = res.data
               if(res.data.photographer_uid){
                   this.addMtInfoForm.photographer_uid = res.data.photographer_uid.split(',').map(Number);
               }else{
                   this.addMtInfoForm.photographer_uid = [9999];
               }
            }
    },
    async submitForm(){
         const { data: res } = await this.$http.post("adminapi/materialfj/materialEdit",
         {
            video_id:this.addMtInfoForm.video_id,
            tag_id:this.addMtInfoForm.tag_id.map((e)=>e.id),
            sch_id:this.addMtInfoForm.sch_id,
            defined_name:this.addMtInfoForm.defined_name,
            product_tag_id:this.addMtInfoForm.product_tag_id.map(e => e.id),
        });
            if (res.code !== 200) {
                return this.$message.error(res.msg);
            } else {
                let restaurants = JSON.parse(localStorage.getItem('restaurants')) || [];
                if(restaurants.length >= 5){
                    let is_Data = restaurants.findIndex(e => e.value == this.addMtInfoForm.defined_name);
                    if(is_Data == '-1'){
                        restaurants = restaurants.splice(1)
                        console.log(restaurants)
                        localStorage.setItem('restaurants',JSON.stringify([...restaurants,{value:this.addMtInfoForm.defined_name}]))
                    }
                }else{
                    localStorage.setItem('restaurants',JSON.stringify([...restaurants,{value:this.addMtInfoForm.defined_name}]))
                }
                console.log(this.addMtInfoForm.defined_name)
                this.$parent.$parent.getMaterialList()
                this.$message.success('编辑成功');
                this.dialogVisible = false
            }
    },
    // 获取标签
    async getTagList(query) {
            const { data: res } = await this.$http.post(
                "adminapi/materialfj/tagList",
                {
                    page: 1,
                    limit: 0,
                    query:query?query:undefined,
                    tag_type:1,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
              this.tag_list = res.data.list;
            }
        },
    // 添加标签
  async  addMaterialTag(item, type) {
     await this.getTagList();
        this.$nextTick(()=>{
            this.$refs.labelsetting.openDialog();
            this.$refs.labelsetting.selectTag(this.tag_list[0]) 
            this.$refs.labelsetting.tagpid = this.addMtInfoForm.tag_id
        })
    },
    GettagData(data){
      this.addMtInfoForm.tag_id = JSON.parse(JSON.stringify(data))
    },
    async getProductList() {
        const { data: res } = await this.$http.post(
            "adminapi/project/productList",
            {
                brand_id: this.addMtInfoForm.brand_id,
            }
        );
        if (res.code !== 200) {
            this.$message.error(res.msg);
            return;
        } else {
            this.productList = res.data;
        }
    },
    //获取品牌列表
    async getBrandList() {
        const { data: res } = await this.$http.post(
            "adminapi/materialfj/bpList"
        );
        if (res.code !== 200) {
            this.$message.error(res.msg);
            return;
        } else {
            this.sch_name = "";
            this.brandList = res.data;
        }
    },
    // 获取拍摄人员列表-深圳
        async getSzPhotoList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szPhotographerList",
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.photoSzList = res.data;
            }
        },
    handleDel(name,i){
        this.addMtInfoForm[name].splice(i,1);
    },   
    handleEnter(val) {
        if(this.addMtInfoForm.sch_id.includes(val.trim()))return this.$message.error('存在重复ID标签');
        this.addMtInfoForm.sch_id.push(val);
        this.sch_name = "";
    },
  },
};
</script>

<style scoped>
.poster_img{
    height: 600px;
    padding: 0 15px;
    background: rgba(165, 177, 209, 0.08);
}
.file_text{
    font-size: 14px;
    color: #616C85;
    margin-top: 5px;
}
.updateDialog >>> .el-dialog__body{
    padding: 0 !important;
} 
.updateDialog >>> .el-dialog__header{
   padding: 0 20px !important;
    border-bottom: 1px solid #EBEBEB !important;
    height: 71px !important;
}
.updateDialog >>> .el-dialog__footer{
    padding: 12px 20px 20px !important;
}
/deep/ .el-select{
    width: 100%;
}
/deep/ .el-input__inner{
    line-height: 36px;
    height: 36px;
    border-radius: 8px;
}

.L-box{
    padding: 31px 35px;
    background: rgba(165, 177, 209, 0.10);
}
.R-box{
    overflow: auto;
    max-height: 663px;
    padding: 20px 20px 0;
}

.bind_box{
    margin-bottom: 10px;
}
.bind_box div:nth-child(1){
    line-height: 20px;
}
.bind_box div:nth-child(2){
    line-height: 20px;
    font-size: 12px;
    color: #ACB2BB;
}
.tag_box{
    height: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    background: #F8F8F9;
    padding: 0 4px 0 8px;
    border-radius: 6px;
    margin-right: 4px;
    margin-bottom: 12px;
}
.tag_box svg{
    cursor: pointer;
}
/deep/ .heade_from label{
  width: 100%;
  line-height: 24px;
  padding:0 !important;
}
.head_tag div:nth-child(2){
  cursor: pointer;
  font-size: 12px;
  color: #165DFF;
}
.custom_label /deep/ .el-form-item__label{
    display: flex;
}
</style>